<template>
    <div>
        <div>
            <!-- 已登录区域布局 -->
            <div class="header user-info" v-if="user">
                <div class="base-info">
                    <div class="left">
                        <van-image
                            class="avatar"
                            :src="userinfo.photo"
                            round
                            fit="cover"
                        />
                        <span class="name">{{userinfo.name}}</span>
                    </div>
                    <div class="right">
                        <van-button size="mini" round>编辑资料</van-button>
                    </div>
                </div>
                <!-- 个人中心关注、粉丝等区域 -->
                <div class="data-stats">
                    <div class="data-item">
                        <span class="count">{{userinfo.art_count}}</span>
                        <span class="text">头条</span>
                    </div>
                    <div class="data-item">
                        <span class="count">{{userinfo.follow_count}}</span>
                        <span class="text">关注</span>
                    </div>
                    <div class="data-item">
                        <span class="count">{{userinfo.fans_count}}</span>
                        <span class="text">粉丝</span>
                    </div>
                    <div class="data-item">
                        <span class="count">{{userinfo.like_count}}</span>
                        <span class="text">获赞</span>
                    </div>
                </div>
            </div>

            <!-- 未登录头部 -->
            <div class="header not-login" v-else>
                <div class="login-btn" @click="$router.push('/login')">
                    <img
                        class="mobile-img"
                        src="@/styles/assets/mobile.png"
                        alt
                    />
                    <span class="text">登录 / 注册</span>
                </div>
            </div>

            <!-- 共同区域 -->
            <van-grid class="grid-nav mb-9" :column-num="2" clickable>
                <van-grid-item class="grid-item">
                    <i slot="icon" class="toutiao toutiao-shoucang"></i>
                    <span slot="text" class="text">收藏</span>
                </van-grid-item>
                <van-grid-item class="grid-item">
                    <i slot="icon" class="toutiao toutiao-lishi"></i>
                    <span slot="text" class="text">历史</span>
                </van-grid-item>
            </van-grid>
            <van-cell title="消息通知" is-link />
            <van-cell class="mb-9" title="小智同学" is-link />

            <!-- 退出登录按钮 -->
            <van-cell
                class="logout-cell"
                @click="outTo"
                clickable
                v-if="user"
                title="退出登录"
            />
        </div>
    </div>
</template>
<script>
import { usinfo } from '@/api/user';
import { mapState } from "vuex";

export default {
    name: "My",
    data() {
        return {
            userinfo: {},
        };
    },
    async created() {
        // 获取用户信息
        // 判断用户是否登录，即判断是否存在token
        if (this.user) {
            // 调用接口            
            let obj = await usinfo(this.user.token)
            this.userinfo = obj.data
        }
    },
    computed: {
        ...mapState(["user"]),
    },
    methods: {
        async outTo() {
            // 退出登录
            await this.$dialog.confirm({
                message: "要退出登录吗？",
            });

            // 由于前置的promise
            // 后续的代码即成功
            this.$store.commit("setUser", null); // null 空对象，被序列化之后 "null",那么，只要不是字符串被序列化就不会报错
        },


    },
};
</script>
<style lang="less" scoped>
.header {
    height: 361px;
    background: url("@/styles/assets/banner.png");
    background-size: cover;
}

.not-login {
    display: flex;
    justify-content: center;
    align-items: center;
    .login-btn {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .mobile-img {
            width: 132px;
            height: 132px;
            margin-bottom: 15px;
        }
        .text {
            font-size: 28px;
            color: #fff;
        }
    }
}

.user-info {
    .base-info {
        height: 231px;
        padding: 76px 32px 23px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .left {
            display: flex;
            align-items: center;
            .avatar {
                width: 132px;
                height: 132px;
                border: 4px solid #fff;
                margin-right: 23px;
            }
            .name {
                font-size: 30px;
                color: #fff;
            }
        }
    }
    .data-stats {
        display: flex;
        .data-item {
            height: 130px;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: #fff;
            .count {
                font-size: 36px;
            }
            .text {
                font-size: 23px;
            }
        }
    }
}

.grid-nav {
    .grid-item {
        height: 141px;
        i.toutiao {
            font-size: 45px;
        }
        .toutiao-shoucang {
            color: #eb5253;
        }
        .toutiao-lishi {
            color: #ff9d1d;
        }
        span.text {
            font-size: 28px;
        }
    }
}

.logout-cell {
    text-align: center;
    color: #d86262;
}

.mb-9 {
    margin-bottom: 9px;
}
</style>
